<!-- Description -->
<section id="description" class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin provides flexible horizontal navigation component, which allows you to modify navigation colors, appearance of different types of content, components placement etc. This page contain all navigation styling options.</p>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- CSS Classes -->
<section id="css-classes" class="card">
    <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>All this functionality is available by setting proper classes to the horizontal navigation components and navigation itself. Below table contain all available classes that can be used with the navigation:</p>
                <p>All these options can be set via following classes:</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Classes</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>.navbar-fixed</code></th>
                                <td>To create horizontal fixed navigation, you need to add <code>.navbar-fixed</code> class in navigation <code>&lt;div&gt;</code> tag. Fore more information please check <a href="horizontal-fixed-navigation.html" target="_blank">horizontal-fixed-navigation.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-flipped</code></th>
                                <td>To create horizontal flipped navigation, you need to add <code>.navbar-flipped</code> class in navigation <code>&lt;div&gt;</code> tag. Fore more information please check <a href="horizontal-flipped-navigation.html" target="_blank">horizontal-flipped-navigation.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-light</code></th>
                                <td>To create light horizontal navigation, you need to add <code>.navbar-light</code> class in navigation <code>&lt;div&gt;</code> tag. Fore more information please check <a href="horizontal-light-navigation.html" target="_blank">horizontal-light-navigation.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-dark</code></th>
                                <td>To create dark horizontal navigation, you need to add <code>.navbar-dark</code> class in navigation <code>&lt;div&gt;</code> tag. Fore more information please check <a href="horizontal-dark-navigation.html" target="_blank">horizontal-dark-navigation.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-without-dd-arrow</code></th>
                                <td>To remove the horizontal navigation dropdown arrow, you need to add <code>.navbar-without-dd-arrow</code> class in navigation <code>&lt;div&gt;</code> tag. This navigation class is optional. Fore more information please check <a href="horizontal-no-arrow-navigation.html" target="_blank">horizontal-no-arrow-navigation.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-icon-right</code></th>
                                <td>To create horizontal navigation with right side icons, you need to add <code>.navbar-icon-right</code> class in navigation <code>&lt;div&gt;</code> tag. This navigation class is optional. Fore more information please check <a href="horizontal-navigation-right-side-icons.html" target="_blank">horizontal-navigation-right-side-icons.html</a></td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-border</code></th>
                                <td>Add horizontal navigation border bottom by adding <code>.navbar-border</code> class in navbar <code>&lt;nav&gt;</code> tag. This navigation class is optional.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.navbar-shadow</code></th>
                                <td>Add horizontal navigation shadow by adding <code>.navbar-shadow</code> class in navbar <code>&lt;nav&gt;</code> tag. This navigation class is optional.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>.disabled</code></th>
                                <td>To disabled horizontal navigation menu link, you need to add <code>.disabled</code> class in navigation <code>&lt;li&gt;</code> tag. This navigation class is optional. Fore more information please check <a href="horizontal-disabled-navigation-link.html" target="_blank">horizontal-disabled-navigation-link.html</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ CSS Classes -->
<!-- HTML Markup -->
<section id="html-markup" class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This section contains HTML Markup to demonstrate horizontal navigation styling options. This markup define where to add css classes to customize navigation as per your requirements.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 12 (Navigation position options):</span> Contain the <code>.navbar-fixed</code> class to set navigation position fixed, here you can use any one class from <code>.navbar-fixed</code> & <code>.navbar-static</code>.</li>
                    <li><span class="text-bold-600">Line no 12 (Navigation color options):</span> Contain the <code>.navbar-dark</code> class to set navigation color dark, here you can use any one class from <code>.navbar-light</code> & <code>.navbar-dark</code>.</li>
                    <li><span class="text-bold-600">Line no 12:</span> The rest of the navigation classes like <code>.navbar-icon-right</code>, <code>.navbar-border</code> & <code>.navbar-shadow</code> are optional and cab be used on your custom requirements.</li>
                </ul>
                <pre data-line="12" class="language-markup">
        <code class="language-markup">
            &lt;!DOCTYPE html&gt;
              &lt;html lang="en"&gt;
                &lt;head&gt;&lt;/head&gt;
                &lt;body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded"&gt;

                  &lt;!-- fixed-top--&gt;
                  &lt;nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border"&gt;
                      ...
                  &lt;/nav&gt;

                  &lt;!-- BEGIN Horizontal Navigation--&gt;
                  &lt;div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-border navbar-without-dd-arrow""&gt;
                      ...
                  &lt;/div&gt;
                  &lt;!-- END Horizontal Navigation--&gt;

                  &lt;!-- BEGIN Content--&gt;
                  &lt;div class="content app-content"&gt;
                      &lt;div class="content-wrapper"&gt;
                          &lt;!-- content header--&gt;
                          &lt;div class="content-header row"&gt;
                              ...
                          &lt;/div&gt;
                          &lt;!-- content header--&gt;

                          &lt;!-- content body--&gt;
                          &lt;div class="content-body"&gt;
                              ...
                          &lt;/div&gt;
                          &lt;!-- content body--&gt;

                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- END Content--&gt;

                  &lt;!-- START FOOTER DARK--&gt;
                  &lt;footer class="footer footer-dark"&gt;
                      ...
                  &lt;/footer&gt;
                  &lt;!-- START FOOTER DARK--&gt;

                &lt;/body&gt;
              &lt;/html&gt;
        </code>
        </pre>
            </div>
        </div>
    </div>
</section>
<!--/ HTML Markup -->
<!-- PUG Code -->
<section id="pug-code" class="card">
    <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                <h5 class="card-title mt-2">PUG Variables</h5>
                <p>This table contains required PUG variables to generate horizontal navigation with styling options.</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Block</th>
                                <th>Variable</th>
                                <th>Datatype</th>
                                <th>Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuType</code></td>
                                <td><code>string</code></td>
                                <td><code>'navbar-fixed'</code></td>
                                <td>To set the horizontal navigation position fixed, use <code>navbarCustom</code> variable value as <code>'navbar-fixed'</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuType</code></td>
                                <td><code>string</code></td>
                                <td><code>'navbar-static'</code></td>
                                <td>To set the horizontal navigation position static, use <code>navbarCustom</code> variable value as <code>'navbar-static'</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuColor</code></td>
                                <td><code>string</code></td>
                                <td><code>'navbar-light'</code></td>
                                <td>To set the horizontal navigation color light, use <code>navbarCustom</code> variable value as <code>'navbar-light'</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuColor</code></td>
                                <td><code>string</code></td>
                                <td><code>'navbar-dark'</code></td>
                                <td>To set the horizontal navigation color dark, use <code>navbarCustom</code> variable value as <code>'navbar-dark'</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuFlipped</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true/false</code></td>
                                <td>To set the horizontal navigation flipped, use <code>menuFlipped</code> variable value as <code>true/false</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuIconRight</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true/false</code></td>
                                <td>To create horizontal navigation with right side icons, use <code>menuIconRight</code> variable value as <code>true/false</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuWithoutDDArrow</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true/false</code></td>
                                <td>To remove the horizontal navigation dropdown arrow, use <code>navbarCustom</code> variable value as <code>true/false</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuBorder</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true/false</code></td>
                                <td>To create horizontal bordered navigation, use <code>menuBorder</code> variable value as <code>true/false</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                            <tr>
                                <th scope="row"><code>horizontalMenuConfig</code></th>
                                <td><code>menuShadow</code></td>
                                <td><code>boolean</code></td>
                                <td><code>true/false</code></td>
                                <td>You can also apply horizontal navigation shadow, use <code>menuShadow</code> variable value as <code>true/false</code> in <code>horizontalMenuConfig</code> block.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert bg-info alert-icon-left mb-2" role="alert">
                    <span class="alert-icon"><i class="la la-info"></i></span>
                    Modern Admin Template <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/documentation" target="_blank" class="white"><u>documentation</u></a> has full list of all blocks, datatype, variables and their description table. Please review it for more configuration options.
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ PUG Code -->
